<template>
  
  <div class="login_container" >
    <div class="login_box">
      <!--头像区域-->
      <!-- <div class="avatar_box">
        <img src="src\assets\logo.png" alt=""/>
      </div> -->
      <h2 class="title">欢迎来到岳麓书院知识管理系统</h2>
      <!--      表单提交区域-->
      <div class="form_container">
        <el-form
        :rules="loginFormRules"
        ref="form"
        label-width="0px"
        class="login_form"
        :model="loginForm"
      >
        <!--手机号-->
        <el-form-item prop="phone" class="frame1">
          <el-input
            v-model="loginForm.phone"
            prefix-icon="iconfont icon-user"
            style="height: 45px"
            placeholder="请输入账户手机号"
          ></el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item prop="password" class="frame2">
          <el-input
            type="password"
            v-model="loginForm.password"
            prefix-icon="iconfont icon-3702mima"
            placeholder="请输入账户密码"
          ></el-input>
        </el-form-item>
        <!-- 按钮区-->
        <el-form-item class="btn_log">
          <el-button type="primary" @click="login" style="background: #770000; height: 45px" >登录</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetpassword" type="text" class="btn_reset" style="color: #770000">忘记密码?</el-button>
          <el-button @click="register" type="text" class="btn_reset" style="color: #770000">注册</el-button>
        </el-form-item>
        </el-form>
      </div>
      
    </div>
  </div>
</template>
<!-- :loading="loginLoading" -->
<script>
import requests from '@/api/ajax';
import store from '@/store';
// import router from '../router'
export default {
  data() {
    return {
      topImg: '../assets/yuelupig.jpg',
      // 这是登录表单的数据绑定对象
      loginForm: {
        phone: '',
        password: '',
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            min: 11,
            max: 11,
            message: '请输入长度为11的手机号',
            trigger: 'blur',
          },
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          {
            min: 6,
            max: 20,
            message: '请输入长度在 6 到 20 之间的密码',
            trigger: 'blur',
          },
        ],
      },
    };
  },
  methods: {
    register() { // 跳转到注册界面
      this.$router.push('/register');
    },
    resetpassword() { // 跳转到忘记密码界面
      this.$router.push('/resetpassword')
    },
    login() {
      // console.log(this.loginForm);
        // 输入为空
        this.$refs['form'].validate((valid) => {
          if (valid) {
            if(this.loginForm.phone !== '' && this.loginForm.password !==''){
        requests.post('/users/login', this.loginForm).then((res) => {
        // console.log(res);
        if (res.code == 1 && res.data.status == 2) {
          // 管理员登陆
          store.commit('$_setToken', res.data.token);
          store.commit('$_setId', res.data.id);
          store.commit('$_setUsername', res.data.userName);
          store.commit('$_setStatus', res.data.status);
          // console.log('身份是'+store.state.status)
          this.$message.success('登录成功!');
          this.$router.push('/home');
        } else if (res.code == 1 && res.data.status == 1) {
          // 编辑登陆
          store.commit('$_setToken', res.data.token);
          store.commit('$_setId', res.data.id);
          store.commit('$_setUsername', res.data.userName);
          store.commit('$_setStatus', res.data.status);
          // console.log('身份是'+store.state.status)
          this.$message.success('登录成功!');
          this.$router.push('/home');
        } else if (res.code == 1 && res.data.status == 0) {
          // 用户登陆
          store.commit('$_setToken', res.data.token);
          store.commit('$_setId', res.data.id);
          store.commit('$_setUsername', res.data.userName);
          store.commit('$_setStatus', res.data.status);
          // console.log('身份是'+store.state.status)
          this.$message.success('登录成功!');
          this.$router.push('/home');
        } else {
          this.$message.error('账号或密码错误');
        }
      });
      } 
          } else {
            // console.log('error submit!!');
            this.$message.error('账号或密码格式错误，无法登录')
            return false;
          }
        });
      
      
      
      
    },
  },
};
</script>

<style lang="less" scoped>
.login_container {
  // background-color: #ffffff;
   background: url("../assets/log.png");
   background-size: 75% 100%;  //设置图片大小
   background-repeat: no-repeat;//将图片样式不重复
   height: 100%; //设置div高度
   width: 100%; //设置div宽度
   
  //  opacity: 0.55;
}

.title {
  margin-top: 60px;
  text-align: center;
}
.login_box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(40%, -50%);
  width: 400px;
  height: 450px;
  background-color: rgb(247, 247, 247);
  border-radius: 5%;
  // opacity: 0.95;
  box-shadow: 0 0 20px #0000002d;
  .login_form {
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    width: 95%;
    padding: 0 40px;
    // line-height: 30px;
  }
  .frame1 {
    padding-bottom: 15px;
  }
  .frame2 {
    padding-bottom: 20px;
  }
  // .btns {
  //   display: flex;
  //   justify-content: flex-end;
  //   width: 100%;
  // }
  .btn_log button{
    width: 100%;
    border: none;
    font-size:medium;
  }
  // .btn_regi >>> .el-button--primary { border: none; }
}
</style>
